<template>
  <a-layout-header
    class="layout-header work"
    v-if="state.thisRouterName === '工作台'"
  >
    <div class="header-one">
      <menu-unfold-outlined
        v-if="collapsed"
        class="trigger"
        @click="setcollapsed"
      />
      <menu-fold-outlined v-else class="trigger" @click="setcollapsed" />
    </div>
    <div class="name">
      {{ state.thisRouterName }}
    </div>
  </a-layout-header>
  <a-layout-header class="layout-header" v-else>
    <div class="header-one">
      <menu-unfold-outlined
        v-if="collapsed"
        class="trigger"
        @click="setcollapsed"
      />
      <menu-fold-outlined v-else class="trigger" @click="setcollapsed" />
    </div>
    <div class="name">{{ state.thisRouterName }}</div>
  </a-layout-header>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, watch, computed } from 'vue'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'LayoutHeader',
  components: {
    MenuFoldOutlined,
    MenuUnfoldOutlined
  },
  setup() {
    const store = useStore()
    const route = useRouter()
    const state = reactive({
      thisRouterName: ''
    })
    //动态的面包屑
    watch(
      () => route.currentRoute.value.name,
      (newValue: any) => {
        state.thisRouterName = newValue
      },
      { immediate: true }
    )
    const setcollapsed = () => {
      store.commit('SET_COLLAPSED')
    }
    const collapsed = computed(() => store.state.collapsed)
    return {
      state,
      store,
      setcollapsed,
      collapsed
    }
  }
})
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
  width: 50px;
  height: 50px;
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}
#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}
.layout-header {
  background: #fff !important;
  height: 140px !important;
  padding: 0 18px !important;
}
.ant-layout-header.layout-header.work {
  height: 200px !important;
}
</style>
